diff --git a/swh/web/ui/templates/search.html b/swh/web/ui/templates/search.html
index f5be3acd0..334b5e3d6 100644
--- a/swh/web/ui/templates/search.html
+++ b/swh/web/ui/templates/search.html
@@ -1,104 +1,117 @@
{% extends "layout.html" %}
{% block title %}Search SWH{% endblock %}
{% block content %}
-<!-- CryptoJS assumed to be installed as a debian package -->
<script src="{{ url_for('static', filename='lib/core.js') }}"></script>
<script src="{{ url_for('static', filename='lib/lib-typedarrays.js') }}"></script>
<script src="{{ url_for('static', filename='lib/sha1.js') }}"></script>
<script src="{{ url_for('static', filename='lib/sha256.js') }}"></script>
-<script src="{{ url_for('static', filename='js/filedrop.js') }}"></script>
+<script src="{{ url_for('static', filename='js/search.js') }}"></script>
+
<div class="container">
- <form id="searchForm"
+ <!-- The text-based SHA1 or SHA256 search -->
+ <h1 class="label label-default">Search with SHA-1 or SHA-256:</h1>
+ <form id="text-hash-form"
action="{{ url_for('search') }}"
class="form"
+ method="get">
+ <br/>
+ <div class="input-group">
+ <input id="text-hash-input"
+ type="text" class="form-control"
+ name="q"
+ placeholder="SHA-1 or SHA-256 checksum" />
+ <span class="input-group-btn">
+ <button id="text-hash-submit"
+ class="btn btn-primary"
+ type="submit">
+ Text search
+ </button>
+ </span>
+ </div>
+ </form>
+
+ <!-- The file-based drag&drop UI-->
+ <h1 class="label label-default">Search with files</h1>
+ <form id="file-hash-form"
+ action="{{ url_for('search') }}"
+ class="text-center form"
method="post"
enctype="multipart/form-data">
- <div class="form-group">
- <label for="sha1_textinput">Search with SHA-1 or SHA-256:</label>
- <br/>
- <div id="textinput" class="input-group">
- <input id="sha1_textinput"
- type="text" class="form-control"
- name="q"
- placeholder="SHA-1 or SHA-256 checksum" />
- </div>
- </div>
- <div id="filesinput" class="input-group">
- <label for="fileElem">Search with files</label>
- <div id="fileinput" class="container text-center" style="border: 1px dashed black">
- Drag and drop or click here to hash files and search for them.
- Your files will NOT be uploaded, hashing is done locally.
- Filesizes over 20Mb may be slow to process, use with care.
- <div id="filelist" class="row">
- </div>
- </div>
+
+ <!--Form input -->
+ <input type="file"
+ id="file-hash-input"
+ class="form-control"
+ multiple
+ name="filename"
+ value=""
+ style="display:none"
+ placeholder="File(s) to hash and search" />
+ <div id="file-drop" class="container text-center" style="border: 1px dashed black">
+ Drag and drop or click here to hash files and search for them.
+ Your files will NOT be uploaded, hashing is done locally.
+ Filesizes over 20Mb may be slow to process, use with care.
+ <div id="filelist" class="row"></div>
</div>
- <div class="text-center" style="margin-top: 10px">
- <button id="submitall" type="submit" class="btn btn-primary">
- <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
+
+ <!-- Form buttons -->
+ <div class="btn-group" style="margin-top: 10px">
+ <button id="file-hash-submission" type="submit" class="btn btn-primary">
+ <span class="glyphicon glyphicon-search" type="submit" aria-hidden="true"></span>
Search
</button>
+ <button id="file-hash-clear" class="btn btn-primary">
+ Clear
+ <span class="glyphicon glyphicon-erase" aria-hidden="true"></span>
+ </button>
</div>
</form>
- <input type="file"
- id="fileElem"
- class="form-control"
- multiple
- name="filename"
- value=""
- style="display:none"
- placeholder="File(s) to upload, hash and search for SHA-1 or SHA-256 checksum" />
- <div id="swh-search-message" class="message">
- </div>
+
+ <div id="search-message" class="message"></div>
+
+ <!-- Search forms setup -->
+ <script>
+ var sfc = new SearchFormController($('#text-hash-form'), $('#file-hash-form'), $('#search-message'));
+ sfc.setupTextForm($('#text-hash-input'));
+ sfc.setupFileForm($('#file-drop'),$('#filelist'),$('#file-hash-input'),$('#file-hash-clear'));
+ </script>
+
{% if search_res is not none %}
+ <!-- Search result display -->
{% if search_stats is not none %}
- <label id="stats">
+ <label class="search-stats">
Files available in SWH: {{ '%.2f' | format(search_stats['pct']) }}% of
{{ search_stats['nbfiles'] }} files.
</label>
{% endif %}
- <table id="results" class="table table-striped">
+ <table class="table table-striped search-res">
<thead class="thead-default">
<th>File name</th>
- <th>SHA1 checksum</th>
+ <th>SHA256 checksum</th>
<th>Result</th>
</thead>
{% for res in search_res %}
<tr>
{% if res['filename'] is not none %}
<td>{{ res['filename'] }}</td>
{% else %}
<td>From text input</td>
{% endif %}
{% if res['found'] %}
<td><a href="{{ url_for('browse_content') }}sha1:{{ res['sha1'] }}">{{ res['sha1'] }}</a></td>
<td><span class="glyphicon glyphicon-ok file-found"></span></td>
{% else %}
<td>{{ res['sha1'] }}</td>
<td><span class="glyphicon glyphicon-remove file-notfound"></span></td>
{% endif %}
</tr>
{% endfor %}
</table>
{% endif %}
- {% if message is not none %}
+ {% if message is not none and message != '' %}
<div class="span8">{{ message | safe }}</div>
</div>
{% endif %}
- <!-- jQuery setup -->
- <div id="test"></div>
- <script>
- var form = $('#searchForm');
- var filelist = $('#filelist');
- // Delegate dropbox click
- $('#fileinput').inputclick($('#fileElem'));
- // Make the dropbox available for drag & drop
- $('#fileElem').filedialog(filelist, form);
- // Make the submission button receptive to files
- $('#fileinput').filedrop(filelist, form);
- // Check the text input before submission
- form.checkSubmission($('#sha1_textinput'), $('#swh-search-message'));
- </script>
</div>
{% endblock %}